<template xlang="wxml">
  <view class="container">
    <view class="qrimg">
      <view class="qrimg-i">
        <tki-qrcode
          v-if="ifShow"
          :cid="'tki-qrcode-canvas'"
          ref="qrcode"
          :val="val"
          :size="size"
          :unit="unit"
          :background="background"
          :foreground="foreground"
          :pdground="pdground"
          :icon="icon"
          :iconSize="iconsize"
          :lv="lv"
          :onval="onval"
          :loadMake="loadMake"
          :usingComponents="true"
          @result="qrR"
        />
      </view>
    </view>
    <view class="uni-list" style="padding: 16rpx">
      <u--input
        placeholder="请输入要生成的二维码内容"
        maxlength="500"
        shape="circle"
        border="surround"
        v-model="val"
      ></u--input>
      <!-- <input
        class="uni-input"
        placeholder="请输入要生成的二维码内容"
        v-model="val"
      /> -->
    </view>
    <view class="body-view">
      <slider
        :value="size"
        @change="sliderchange"
        min="50"
        max="400"
        show-value
      />
    </view>
    <view class="btnGrid">
      <u-grid :border="true">
        <u-grid-item @click="openBg">
          <u-icon
            :customStyle="iconStyle"
            :name="'setting'"
            :size="22"
          ></u-icon>
          <text class="grid-text">设置背景色</text>
        </u-grid-item>
        <u-grid-item  @click="openQg">
          <u-icon
            :customStyle="iconStyle"
            :name="'setting'"
            :size="22"
          ></u-icon>
          <text class="grid-text">设置前景色</text>
        </u-grid-item>
        <u-grid-item  @click="openJb">
          <u-icon
            :customStyle="iconStyle"
            :name="'setting'"
            :size="22"
          ></u-icon>
          <text class="grid-text">设置角标色</text>
        </u-grid-item>
        <u-grid-item  @click="selectIcon">
          <u-icon
            :customStyle="iconStyle"
            :name="'photo'"
            :size="22"
          ></u-icon>
          <text class="grid-text">设置中心图标</text>
        </u-grid-item>
        <u-grid-item  @click="saveQrcode">
          <u-icon
            :customStyle="iconStyle"
            :name="'download'"
            :size="22"
          ></u-icon>
          <text class="grid-text">保存到手机</text>
        </u-grid-item>
        <u-grid-item  @click="clearQrcode">
          <u-icon
            :customStyle="iconStyle"
            :name="'close-circle'"
            :size="22"
          ></u-icon>
          <text class="grid-text">清除二维码</text>
        </u-grid-item>
       
      </u-grid>
      
    </view>
    <view  @click="creatQrcode" style="padding:20rpx 100rpx;"><u-button type="primary" icon="reload" text="生成新二维码"></u-button></view>
    <!-- <view class="uni-padding-wrap">
      <view class="btns">
        <button type="primary" @click="selectIcon">设置中心图标</button>
        <button type="primary" @click="creatQrcode">生成新二维码</button>
        <button type="primary" @click="saveQrcode">保存到手机</button>
        <button type="warn" @click="clearQrcode">清除二维码</button>
        <button @click="openBg">设置背景色</button>
        <button @click="openQg">设置前景色</button>
        <button @click="openJb">设置角标色</button>
        <button type="warn" @tap="ifQrcode">显示隐藏二维码</button>
      </view>
    </view> -->
    <t-color-picker
      ref="colorPickerBg"
      :color="color"
      @confirm="confirmBg"
    ></t-color-picker>
    <t-color-picker
      ref="colorPickerQg"
      :color="color"
      @confirm="confirmQg"
    ></t-color-picker>
    <t-color-picker
      ref="colorPickerJb"
      :color="color"
      @confirm="confirmJb"
    ></t-color-picker>
  </view>
</template>
<script>
import tkiQrcode from "./tki-qrcode/tki-qrcode.vue";
import tColorPicker from "./t-color-picker/t-color-picker.vue";
export default {
  components: {
    tkiQrcode,
    tColorPicker,
  },
  data() {
    return {
      ifShow: true,
      val: "https://www.zhangweishihundan.com/", // 要生成的二维码值
      size: 200, // 二维码大小
      unit: "rpx", // 单位
      background: "#ffffff", // 背景色
      foreground: "#000", // 前景色
      pdground: "#000", // 角标色
      icon: "", // 二维码图标
      iconsize: 40, // 二维码图标大小
      lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
      onval: false, // val值变化时自动重新生成二维码
      loadMake: true, // 组件加载完成后自动生成二维码
      src: "", // 二维码生成后的图片地址或base64
      color: { r: 255, g: 0, b: 0, a: 0.6 },
      iconStyle:{ paddingTop: 20 + 'rpx',color:'#dd6161' }
    };
  },
  methods: {
    openBg() {
      // 打开颜色选择器
      this.$refs.colorPickerBg.open();
    },
    confirmBg(e) {
      this.background = e.hex;
      setTimeout(() => {
        this.creatQrcode();
      }, 100);
      console.log("背景颜色：", e);
    },
    openQg() {
      // 打开颜色选择器
      this.$refs.colorPickerQg.open();
    },
    confirmQg(e) {
      this.foreground = e.hex;
      setTimeout(() => {
        this.creatQrcode();
      }, 100);
      console.log("背景颜色：", e);
    },
    openJb() {
      // 打开颜色选择器
      this.$refs.colorPickerJb.open();
    },
    confirmJb(e) {
      this.pdground = e.hex;
      setTimeout(() => {
        this.creatQrcode();
      }, 100);
      console.log("背景颜色：", e);
    },
    sliderchange(e) {
      this.size = e.detail.value;
    },
    creatQrcode() {
      this.$refs.qrcode._makeCode();
    },
    saveQrcode() {
      this.$refs.qrcode._saveCode();
    },
    qrR(res) {
      this.src = res;
    },
    clearQrcode() {
      this.$refs.qrcode._clearCode();
      this.val = "";
      this.background  = "#ffffff";
      this.foreground = "#000";
      this.pdground = "#000";
    },
    ifQrcode() {
      this.ifShow = !this.ifShow;
    },
    selectIcon() {
      let that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album"], //从相册选择
        success: function (res) {
          that.icon = res.tempFilePaths[0];
          setTimeout(() => {
            that.creatQrcode();
          }, 100);
          // console.log(res.tempFilePaths);
        },
      });
    },
  },
  components: {
    tkiQrcode,
  },
  onLoad: function () {},
};
</script>

<style lang="scss">
/* @import "../../../common/icon.css"; */
.container {
  display: flex;
  flex-direction: column;
  width: 100%;
  .qrimg {
    display: flex;
    justify-content: center;
    .qrimg-i {
      margin-right: 10px;
    }
  }
  .btnGrid{
    .grid-text{
padding: 20rpx 0 20rpx 0;
color: #53c21d;
    }
  }
}
</style>
